<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery静态方法map方法</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            var arr=[1,3,5,7,9];
            var obj={0:1,1:3,2:5,3:7,4:9,length:5};

            //1.利用原生js的map方法遍历
             /*
                第一个参数：遍历到的元素
                第二个参数：当前遍历到的索引
                第三个参数：当前遍历的数组
                注意点：和原生forEach方法一样，只能遍历数组，不能遍历伪数组
            */
            
            // arr.map(function (value,index,array) {
            //     console.log(index,value,array);
            //   });
            // obj.map(function (value,index,array) {
            //     console.log(index,value,array);
            // });


            //2.利用jQuery的map方法遍历
            /*
                第一个参数：遍历到的数组
                第二个参数：每遍历一个元素后执行的回调函数
                回调函数的参数：
                    第一个参数：遍历到的元素
                    第二个参数：遍历到的索引
                注意点：和jQuery的each方法一样，能遍历数组，也能遍历伪数组
            */
            // $.map(arr,function (value,index) {
            //     console.log(index,value);
            //   });
            //   $.map(obj,function (value,index) {
            //     console.log(index,value);
            //   });


            //jQuery的map方法和each方法的区别
            /*
                each静态方法默认的返回值就是，遍历谁就返回谁
                map静态方法的返回值是一个空数组

                each静态方法不支持在回调函数中对遍历的数组进行处理
                map静态方法可以在回调函数中通过return对遍历数组进行处理，然后生成一个新的数组
            */
              var res1=$.map(obj,function (value,index) {
                console.log(index,value);
                return index+value;
              });
              var res2=$.each(obj,function (index,value) {
                console.log(index,value);
                return index+value;
              });
              console.log(res1);
              console.log("***************");
              console.log(res2);
        </script>
    </head>
    <body>

    </body>
</html>